﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <style>
  	*{
  margin:0px;
  padding:0px;
}
#photo{width:800px;height:320px;margin:20px;position: relative;}
#photo img{width:800px;height:320px;}
#move{width:200px;height:160px;position: absolute;top:0;left:0;}
#box{width:400px;height:320px;position:absolute;left:840px;top:20px;overflow: hidden;background: #DDAADD;}
#box img{width:1600px;height:640px;position:absolute;}
  </style>
  <script type="text/javascript">
  	window.onload = function(){
  		var move = document.getElementById("move");
  		var photo = document.getElementById("photo");
  		var box =document.getElementById("box");
  		photo.onmousemove = function(e){
  			var e = e || event;
  			var movePosition = {//获取move的位置
  				x:e.clientX - photo.offsetLeft - move.offsetWidth/2,
  				y:e.clientY - photo.offsetTop - move.offsetHeight/2
  			};
  			move.style.left = movePosition.x + "px";
  			move.style.top = movePosition.y + "px";
  			if(move.offsetLeft <=0){//使move不能出photo的左界
  				move.style.left = 0;
  			}
  			move.offsetTop<=0?move.style.top=0:null;//使move不能出photo的上界
  			move.offsetLeft>=photo.offsetWidth - move.offsetWidth?move.style.left = photo.offsetWidth - move.offsetWidth + "px":null;//使move不能出photo的右界
  			move.offsetTop>=photo.offsetHeight - move.offsetHeight?move.style.top = photo.offsetHeight - move.offsetHeight + "px":null;//使move不能出photo的下界
  			
  			box.children[0].style.left = -parseInt(window.getComputedStyle(move,null).left)*2 + "px";
  			box.children[0].style.top = -parseInt(window.getComputedStyle(move,null).top)*2 + "px";
  		}
  		
  	}
  </script>
</head>
<body>
 
 <div id="photo">
 		<div id="move"></div>
 		<img src="images/001.jpg"/>
 </div>
	<div id="box">
		<img src="images/001.jpg"/>
	</div>
</body>
</html>